/* eslint-disable no-shadow */
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/require-default-props */
/* eslint-disable react/destructuring-assignment */
import React from 'react'
import {Button, Table, Tag} from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
import {connect, useDispatch} from 'umi'
import Styles from './index.less'

import AssociatedModal from './AssociatedModal'

moment.locale('zh-cn')

function AssociatedTable(props: {
	location?: any
	driverRewardRules?: any
	routerQuery: any
}) {
	const {routerQuery} = props
	const {outTableList} = props.driverRewardRules
	const dispatch = useDispatch()
	const deleteList = (id: any) => {
		const del = outTableList.filter((item: {id: any}) => item.id !== id)
		dispatch({
			type: 'driverRewardRules/updateState',
			payload: {
				outTableList: [...del],
			},
		})
	}

	const columns2: any[] = [
		{
			title: '商品方案ID',
			dataIndex: 'commodityNo',
			key: 'commodityNo',
			width: 250,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '商品方案名称',
			dataIndex: 'commodityName',
			key: 'commodityName',
			width: 200,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '品牌/车系/车型',
			dataIndex: 'brandInfo',
			key: 'brandInfo',
			width: 240,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '星级',
			dataIndex: 'carStar',
			key: 'carStar',
			width: 100,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '订单类型',
			dataIndex: 'rentTypeName',
			key: 'rentTypeName',
			width: 180,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},

		{
			title: '定金',
			dataIndex: 'depositAmount',
			key: 'depositAmount',
			width: 150,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '押金',
			dataIndex: 'mortgageAmount',
			key: 'mortgageAmount',
			width: 100,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '租期',
			dataIndex: 'leaseTerm',
			key: 'leaseTerm',
			width: 100,
			align: 'center',
		},
		{
			title: '月租金-新签',
			dataIndex: 'rentAmount',
			key: 'rentAmount',
			width: 200,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '月租金-续签',
			dataIndex: 'renewRentAmount',
			key: 'renewRentAmount',
			width: 120,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '首付款',
			dataIndex: 'advancePaymentAmount',
			key: 'advancePaymentAmount',
			width: 100,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '尾款',
			dataIndex: 'balancePaymentAmount',
			key: 'balancePaymentAmount',
			width: 100,
			align: 'center',
			ellipsis: true,
			render: (text: any) => (
				<span>{Number(text) > 0 ? text : '--'}</span>
			),
		},
		{
			title: '状态',
			dataIndex: 'auditStatus',
			key: 'auditStatus',
			width: 150,
			align: 'center',
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},
	]
	if (
		routerQuery.pageType !== 'detail' &&
		routerQuery.pageType !== 'process'
	) {
		columns2.push({
			title: '操作',
			dataIndex: 'address',
			key: 'address',
			align: 'center',
			width: 150,
			fixed: 'right',
			render: (_: any, record: {id: any}) => (
				<Button type="link" onClick={() => deleteList(record.id)}>
					删除
				</Button>
			),
		})
	}

	return (
		<div className={Styles.basics}>
			<div className={Styles.titleBox}>
				关联商品方案
				<AssociatedModal routerQuery={routerQuery} />
			</div>
			<Table
				style={{margin: '16px 0 0 0'}}
				columns={columns2}
				scroll={{y: 500}}
				pagination={false}
				bordered
				rowKey="id"
				dataSource={outTableList}
			/>
		</div>
	)
}

export default connect(({driverRewardRules, user}: any) => ({
	user,
	driverRewardRules,
}))(AssociatedTable)
